МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
НАЦІОНАЛЬНИЙ УНІВЕРСИТЕТ "ЛЬВІВСЬКА ПОЛІТЕХНІКА"
ІНСТИТУТ ПІСЛЯДИПЛОМНОЇ ОСВІТИ
КАФЕДРА ПРОГРАМНОГО ЗАБЕЗПЕЧЕННЯ
/
ЗВІТ ДО ЛАБОРАТОРНОЇ РОБОТИ №2 на тему:
"Опрацювання мовою Java Script
подій на сторінці HTML"
Тема роботи:Опрацювання мовою JavaScript подій на сторінці HTML.
Мета роботи: Оволодіти структурою та методами мови JavaScript для опрацювання подій.
КОРОТКІ ТЕОРЕТИЧНІ ВІДОМОСТІ
Події та обробники подій є дуже важливою частиною у програмування на JavaScript. Події (Events), головним чином, ініціюються тими або іншими діями користувача.
Події – це дії, які відбуваються, внаслідок того, що робить користувач. Наприклад, якщо користувач клацає по деякій кнопці, відбувається подія Click. Якщо миша перетинає яке-небудь посилання - відбувається подія Mouse Over. Існує певний набір подій, які розпізнає той чи інший броузер.
Ми можемо примусити нашу JavaScript-програму реагувати на деякі з них. І це може бути виконано за допомогою спеціальних програм обробки подій. Так, в результаті клацання по кнопці може створюватися випадаюче вікно. Це означає, що створення вікна повинно бути реакцією на подію Click. Програма - обробник подій, яку ми повинні використати в даному випадку, називається on Click. І вона повідомляє комп'ютер, що потрібно робити, якщо відбудеться дана подія.
Обробник подій записується в документ як атрибут тега HTML, до якого ви приписуєте код JavaScript. Наприклад, ви створили функцію JavaScript, і назвали її compute. Ви можете примусити броузер виконувати цю функцію, коли користувач натискає на кнопку, в якій до on Click приписаний обробник результату кнопки:
INPUT TYPE="button" VALUE="Calculate" onClick="compute(this.form)"
Ви можете поміщати будь які твердження Java Script усередині кавичок on Click. Ці твердження будуть виконані, коли користувач натискатиме на кнопку. Якщо Ви хочете включити більш ніж одне твердження, то окремі твердження записуються через крапку з комою (;). Взагалі, це – непогана ідея визначати функцію для обробників подій тому що:
церобить ваш код мобільним, оскільки ви можете використовувати ту ж саму функцію в багатьох різних місцях.
це робить ваші твердження більш легкими для читання.
В даному прикладі використовуєтьсяt his.form, щоб звернутися до поточної форми. Ключове слово звертається до об'єкту (об'єкту кнопки у вище зазначеному прикладі). Потім конструкція this.form звертається до форми, щомістить кнопку. Далі – обробник події on Click робить запит до функції compute(), з поточною формою this.form, як параметр функції.
Події звертаються до тегів HTML таким чином:
події Focus, Blur, Change: text fields, textareas, і selections;
подія Click: buttons, radio buttons, checkboxes, submit buttons, reset buttons, links;
подія Select: text fields, textareas;
подія MouseOver: links.
Ви можете використовувати в скрипті безліч різних типів функцій обробки подій. Щоб дізнатись про усі існуючі обробники подій, звертайтеся до відповідного довідника. Наведемо лише деякі з них:
onLoad- виконання скрипта абофункції при завантаженні;
onChange- породжується при змінізначенняелементаформи;
onClick - породжується при виборіоб'єкту (button, checkbox і т.п.);
onSelect - породжується при виборі текстового об'єкту (text, textarea);
onSubmit - при натисненні на кнопку Submit;
onUnload - при переході до іншоїсторінки.
Виконання роботи:
<html>
<body>
Це звичайний документ HTML.
<br> <script language="JavaScript"> document.write("А це JavaScript!")</script><br>
Знову документ HTML.
</body></html>
Власне кодом JavaScript є такі три рядки:
<script language="JavaScript">
document.write("А це JavaScript!")
</script>
<form><input type="button" value="Приклад з alert"
onClick="alert('Бачиш, що вийшло?')"></form>
/Рис 1. Приклад виконаня Java Script подій на сторінці HTML"
ВИСНОВКИ: На даній лабораторній роботі я вивчив структуру об’єктів html-документа в JavaScript, навчився опрацьовувати основні події, які виникають при робо...
